import * as React from 'react';
import './index.scss';

class YunDouTalk extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.myRef = React.createRef();
  }

  scrollToMyRef = () => {
    // const offset = (this.myRef as any).offsetTop;
    // offset > 88 && ((document.getElementById('leadBox') as any).scrollTop = (offset - 88));
    this.myRef && this.myRef.current && this.myRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  componentDidMount() {
    console.log('current', this.myRef.current);
    // console.log('offset top', (this.myRef as any).offsetTop);
    // this.scrollSmooth(this.props.id);
    this.scrollToMyRef();
  }

  render() {
    const { message, shine } = this.props;

    return (
      <div className={'YunDouTalk'} ref={this.myRef}>
        <div className={'YunDouIcon'} />
        <div className={`YunDouMessage${shine ? 'YunDouMessageShine' : ''}`}>
          {message.map((item, key) => {
            return (
              <div key={key}>
                {item.title && <div className={'YunDouMessageTitle'}>{item.title}</div>}
                {item.content && <div className={'YunDouMessageContent'}>{item.content}</div>}
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default YunDouTalk;
